<template>
  <div class="list">
    <!-- 
      v-model 表示加载状态，当滚动条触底的时候会设置它的值为true
      finished  是否加载完成，当数据全部加载完成之后设置它为true，以后再次触底就不会触发load事件了
      load  表示滚动条触底时候的事件
    -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
      class="content"
    >
      <van-card
        v-for="(v, i) in list"
        :key="v.id"
        :num="v.amount"
        :tag="i + 1 + ''"
        :price="v.price.toFixed(2)"
        :desc="v.desc"
        :title="v.name"
        :thumb="v.coverImage | dalImg"
        :origin-price="(v.price * 1.2).toFixed(2)"
        @click-thumb="toDetail(v)"
      />
    </van-list>
  </div>
</template>

<script>
import { loadProductsAPI } from "../services/products";
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      pages: 1, //总页数
    };
  },
  created() {
    // this.loadData();
  },
  methods: {
    toDetail(v) {
      this.$router.push({
        name: "Detail",
        params: { id: v.id },
      });
    },
    async loadData() {
      const res = await loadProductsAPI(this.page, this.$route.query.t);
      this.page++;
      this.pages = res.pages; //设置总页数变量 从服务器获取
      this.list.push(...res.data);
      this.loading = false;
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
  },
};
</script>

<style></style>
